import React from 'react'
import { Layout} from 'antd';
import Table from '../Table'
import Editor from "../Editor"
import {useSelector,useDispatch,connect} from 'react-redux'
import "./tr.css"

const {Content} = Layout;

const Studyhistory = () => {
  const studyhistoryList = useSelector(state=> state.studyhistory.studyhistoryList)
  const valueList = useSelector(state=> state.value.valueList)
  const dispatch = useDispatch()
  let value;
  
  const columns = [
    {
        title: '历史记录id',
        key: 'history_id',
        dataIndex: 'history_id',
        valueType: 'text',
    },
    {
        title: '历史记录标题',
        dataIndex: 'history_title',
        key: 'history_title',
        ellipsis: true
    },
    {
        title: '用户昵称',
        dataIndex: 'user_name',
        key: 'user_name',
        valueType: 'text'
    },
    {
        title: '用户头像',
        key: 'user_img',
        dataIndex: 'user_img',
        valueType: 'avatar',
        hideInSearch: true
    },
    {
        title: '时间',
        dataIndex: 'time',
        key: 'time',
        valueType: 'text'
    },
    {
      title: '内容摘录',
      key: 'excerpt',
      dataIndex: 'excerpt',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '历史记录图片',
      key: 'history_img',
      dataIndex: 'history_img',
      valueType: 'avatar',
      hideInSearch: true
    },
    {
      title: '用户号码',
      key: 'user_number',
      dataIndex: 'user_number',
      valueType: 'text',
    },
    {
      title: '历史记录内容',
      key: 'content',
      dataIndex: 'content',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '操作',
      key: 'option',
        width: 120,
        valueType: 'option',
        render: (text,record,index,action) => [<div onClick={()=>{
          dispatch({type:'get',con:record});console.log(valueList)
        }}><Editor ques={user} url="http://101.34.58.111:8081/userstudyhistory"/></div>
        , <a onClick={async ()=>{
          console.log(record)
          await fetch(`http://101.34.58.111:8081/userstudyhistory/${record.history_id}/${record.history_title}`,{
          method:'delete',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
        })
        dispatch({type:'delete',content:['delete']})
        }}>删除</a>]
      }];
  const right = {}

  const user = [
    {name:'history_id',label:'历史记录id',tooltip:'最长为24位',placeholder:'请输入历史记录id'},
    {name:'history_title',label:'历史记录标题',tooltip:'最长为24位',placeholder:'请输入历史记录标题'},
    {name:'user_name',label:'用户昵称',tooltip:'最长为24位',placeholder:'请输入用户昵称'},
    {name:'user_img',label:'用户头像',placeholder:'上传头像'},
    {name:'time',label:'时间',tooltip:'最长为24位',placeholder:'请输入时间'},
    {name:'excerpt',label:'内容摘录',placeholder:'请输入内容摘录'},
    {name:'history_img',label:'历史记录图片',placeholder:'上传图片'},
    {name:'user_number',label:'用户号码',tooltip:'最长为24位',placeholder:'请输入用户号码'},
    {name:'content',label:'历史记录内容',placeholder:'请输入历史记录内容'},
]

    return (
        <Content className="site-layout-background" style={{paddingLeft: 10,margin: 0,minHeight: 280,}}>
          <Table title="我的学习历史记录管理" columns={columns} right={right} url="http://101.34.58.111:8081/userstudyhistory" ques={user} />
        </Content>
    )
}

export default connect()(Studyhistory)